<template>
  <div class="login-form" center flex-col>
    <p class="title" font-size-28 font-600>登录</p>
    <div class="form" w-full>
      <el-form
        label-position="top"
        @keyup.enter="login"
        label-width="auto"
        :model="loginForm"
        ref="ruleFormRef"
        :rules="rules"
        status-icon
      >
        <el-form-item label="账号" prop="userName">
          <el-input v-model="loginForm.userName" placeholder="admin/user" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input show-password v-model="loginForm.password" placeholder="123456" />
        </el-form-item>
      </el-form>
      <el-button @click="login" mt-10 w-full type="primary">登录</el-button>
      <!-- <p mt-5 text-right>找回密码</p> -->
    </div>
    <!-- <div class="footer" w-full center flex-col></div> -->
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { HOME_URL } from "@/config";
import { useUserStore } from "@/stores/modules/user";
import { useAuthStore } from "@/stores/modules/auth";
import type { FormInstance, FormRules } from "element-plus";
import { ElNotification } from "element-plus";
// import { loginApi } from "@/api/modules/login";
import { initDynamicRouter } from "@/router/modules/dynamicRouter";
import { getTimeState } from "@/utils";
const userStore = useUserStore();
const authStore = useAuthStore();
const router = useRouter();
const ruleFormRef = ref<FormInstance>();
interface Form {
  userName: string;
  password: string;
}
const rules = reactive<FormRules<Form>>({
  userName: [
    {
      required: true,
      message: "请输入账号",
      trigger: ["blur", "change"]
    }
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: ["blur", "change"]
    }
  ]
});
const loginForm = ref<Form>({
  userName: "",
  password: ""
});
//登录
let loading = false;
const login = () => {
  if (!ruleFormRef.value) return;
  ruleFormRef.value?.validate(async valid => {
    if (!valid && loading) return;
    loading = true;
    //模拟账号登录，有接口后可删除此部分代码，使用try里面的代码，权限逻辑可自行修改判断
    if ((loginForm.value.userName === "admin" || loginForm.value.userName === "user") && loginForm.value.password === "123456") {
      userStore.setToken("token");
      if (loginForm.value.userName === "user") {
        authStore.role = "user";
        await initDynamicRouter();
        router.push("/facilityClass");
      } else {
        authStore.role = "admin";
        await initDynamicRouter();
        router.push(HOME_URL);
      }
      ElNotification({
        title: getTimeState(),
        message: "欢迎登录百工堰后台管理系统",
        duration: 2000
      });
    }
    // try {
    //   const { code, data } = await loginApi(loginForm.value);
    //   if (code === 200) {
    //     userStore.setToken(data.Token as string);
    //     userStore.setUserInfo(data);
    //     await initDynamicRouter();
    //     router.push(HOME_URL);
    //     ElNotification({
    //       title: getTimeState(),
    //       message: "欢迎登录百工堰后台管理系统",
    //       duration: 2000
    //     });
    //   }
    // } finally {
    //   loading = false;
    // }
  });
};
</script>

<style scoped lang="scss">
.login-form {
  padding: 10px 5px;
  border-radius: 5px;
  width: 350px;
}
.title {
  width: 100%;
  text-align: center;
  letter-spacing: 4px;
  color: #409eff;
}
.form {
  margin: 5rem 0;
}
</style>
